<script setup>
import { onMounted, ref } from 'vue'
import { getFeedbackList } from '@/api/index'

const listTotal = ref(0)
const pageNo = ref(1)

const complainList = ref([])
async function onGetFeedbackList() {
  try {
    await uni.showLoading({ title: '请稍后' })
    const { result: { records, total } } = await getFeedbackList({ type: 1, pageNo: pageNo.value, pageSize: 10 })
    complainList.value = records
    listTotal.value = total
    uni.hideLoading()
  }
  catch (e) {
    await uni.showToast({ icon: 'none', title: e.message, duration: 2000 })
  }
}

function onPageNoChange(e) {
  pageNo.value = e.current
}

function goComplainDetail(id) {
  uni.navigateTo({ url: `/pages/me/view/complain-detail?id=${id}` })
}

onMounted(() => {
  onGetFeedbackList()
})
</script>

<template>
  <view class="bg-[#F5F5F5] pb-safe min-h-safe">
    <nut-navbar title="游客投诉记录" custom-color="#000" left-show placeholder fixed />
    <main class="mt-1.5 bg-white">
      <nut-empty v-if="complainList.length === 0" description="暂无投诉记录">
        <template #image>
          <view class="center h-full">
            <image class="block !h-230 !w-180" src="../../../static/image/me/empty.jpg" />
          </view>
        </template>
      </nut-empty>
      <view v-else>
        <uni-table stripe border>
          <uni-tr>
            <uni-th width="120" align="center">
              <view class="text-black">
                投诉时间
              </view>
            </uni-th>
            <uni-th width="80" align="center">
              <view class="text-black">
                投诉人
              </view>
            </uni-th>
            <uni-th width="90" align="center">
              <view class="text-black">
                联系电话
              </view>
            </uni-th>
            <uni-th width="80" align="center">
              <view class="text-black">
                操作
              </view>
            </uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="item in complainList" :key="item.id">
            <uni-td align="center">
              {{ item.createTime.split(' ')[0] }}
            </uni-td>
            <uni-td align="center">
              {{ item.name }}
            </uni-td>
            <uni-td align="center">
              {{ item.phone }}
            </uni-td>
            <uni-td align="center">
              <view class="text-[#3E7CDE] underline underline-offset-4" @click="goComplainDetail(item.id)">
                查看
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
        <view class="px-2 py-1">
          <uni-pagination :total="listTotal" :current="pageNo" :page-size="10" @change="onPageNoChange" />
        </view>
      </view>
    </main>
  </view>
</template>
